import { QuestionRadioStatPropsType } from '.';
import { FC, useMemo } from 'react';
import { PieChart, Pie, Tooltip, Cell, ResponsiveContainer } from 'recharts';
import { STAT_COLORS } from '../../../constants';
const StatComponent: FC<QuestionRadioStatPropsType> = (props: QuestionRadioStatPropsType) => {
  const { stat } = props;
  const sum = useMemo(() => {
    return stat.reduce((pre, current) => {
      return current.count + pre;
    }, 0);
  }, [stat]);
  function format(sum: number): string {
    return sum.toFixed(2);
  }
  return (
    <div style={{ width: '300px', height: '400px' }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            dataKey="count"
            startAngle={0}
            endAngle={360}
            data={stat}
            cx="50%"
            cy="50%"
            outerRadius={50}
            fill="#8884d8"
            label={(item) => `${item.name}: ${format((item.count / sum) * 100)}%`}
          >
            {stat.map((_, index) => {
              return <Cell key={index} fill={STAT_COLORS[index]} />;
            })}
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};
export default StatComponent;
